<!--
 * @Author: byron
 * @Date: 2022-01-18 21:56:25
 * @LastEditTime: 2022-02-19 21:54:32
-->
<template>
    <transition name="message-fade">
        <div
            class="message-warp"
            :style="'top:' + topStyle + 'px'"
            v-show="visible"
        >
            <div :class="['message', textClass]">
                <div class="message-content">
                    <div class="content">
                        <i :class="['iconfont', iconType]"></i>
                        <p class="text">{{ message }}</p>
                    </div>
                    <i class="iconfont icon-delete" @click="handleClose"></i>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
const TypeClass = {
    error: 'error',
    success: 'success',
    warning: 'warning',
    info: 'info',
}
export default {
    data() {
        return {
            visible: false,
            message: '',
            type: 'info',
            duration: 3000,
            topStyle: 0,
            id: 0,
            destroyTimer: null,
        }
    },
    computed: {
        iconType() {
            if (this.type == 'success') return 'icon-success'
            else if (this.type == 'warning') return 'icon-warning'
            else if (this.type == 'error') return 'icon-error'
            else if (this.type == 'info') return 'icon-info'
            return 'icon-info'
        },
        textClass() {
            return TypeClass[this.type]
        },
    },
    methods: {
        handleClose() {
            if (this.$el && this.$el.parentNode) {
                this.visible = false
                this.onClose && this.onClose(this.id)
                let timer = setTimeout(() => {
                    this.$destroy()
                    this.$el.parentNode.removeChild(this.$el)
                    clearTimeout(timer)
                }, 300)
            }
        },
    },
    mounted() {
        this.destroyTimer = setTimeout(() => {
            this.handleClose()
            this.destroyTimer = null
        }, this.duration)
    },
}
</script>

<style scoped lang="less">
.message-warp {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    background-color: transparent;
    pointer-events: none;
    transition: top 0.3s;
    &.message-fade-enter-active {
        animation: confirm-fadein 0.3s;
    }
    &.message-fade-leave-active {
        animation: confirm-fadeout 0.3s;
    }

    .message {
        padding-right: 20px;
        z-index: 12;
        background-color: #fff;
        border: 1px solid #d6f4e4;
        overflow: hidden;
        font-size: 14px;
        border-radius: 4px;
        margin: auto;
        box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
        pointer-events: painted;

        &.info {
            border: 1px solid #edf2fc;
            color: #909399;
        }
        &.success {
            border: 1px solid #d6f4e4;
            color: #0ec05e;
        }
        &.error {
            border: 1px solid #fef0f0;
            color: #f56c6c;
        }
        &.warning {
            border: 1px solid #fdf6ec;
            color: #e6a23c;
        }

        .message-content {
            position: relative;
            text-align: center;
            .content {
                padding: 12px 10px;
                display: flex;
                align-items: center;

                .text {
                    display: inline-block;
                    margin-left: 8px;
                    color: #333;
                }
                i {
                    font-weight: 700;
                    font-size: 20px;
                }
            }

            i:last-child {
                position: absolute;
                right: -16px;
                top: 50%;
                transform: translateY(-50%);
                color: #e9e5e5;
                cursor: pointer;
                font-size: 20px;
            }
        }
    }
}

@keyframes confirm-fadein {
    0% {
        transform: translateY(-100%);

        opacity: 0;
    }
    100% {
    }
}
@keyframes confirm-fadeout {
    0% {
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
</style>
